<template>
    <div
            class="down-refresh"
            :style="{top:top+'px',opacity}"
    >
        <div class="static" v-if="!refresh">
            <img src="../../../../assets/images/home-refresh-static.svg" />下拉刷新
        </div>
        <div class="doing" v-else>
            <img src="../../../../assets/images/home-refresh-animation.svg" />正在刷新
        </div>
    </div>
</template>

<script>
export default {
    name: "down-refresh",
    props: {
        top:{
            type: Number,
            default: 0
        },
        opacity: {
            type: Number,
            default: 0
        },
        // 到达底部，触发刷新
        refresh: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        top(value) {
            if(value === 0) {
                this.$emit('refreshed')
            }
        }
    }
}
</script>

<style scoped lang="less">
    .down-refresh{
        position: absolute;
        top:45px;
        left:0;
        z-index: 10;
        transition: .3s;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #FACC3C;
        font-weight: bolder;
        .static,.doing{
            width: 100px;
            margin: 0 auto;
            img{
                width: 40px;
                height: 40px;
                float: left;
            }
        }
    }
</style>
